<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <!-- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> -->
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/login.css" />
</head>

<body>
    <div class="pos">
        <div class="login">
            <span class="close iconfont icon-close"></span>
            <img src="/static/img/login/loginlogo.png" alt="">
            <ul>
                <li></li>
                <li class="phone">登陆</li>
                <li></li>
            </ul>
           
                <input style="margin-top: 0;" type="text" name="tel" class="tel" id="username" placeholder="请输入您的用户名">
                <input type="password" name="pass" class="pass" id="password" placeholder="请输入密码">
                <!-- <span class="tips">密码或账号不对</span> -->
                <button class="loginbtn">
                    登陆
                </button>
      
            <p>
                <span>
                    还没有账号?
                    <a href="javascript:;">点击注册</a>
                </span>
                <span id="user"></span>
                <span id="pass"></span>
            </p>
        </div>
    </div>
    <script>
        let btn = document.querySelector('.loginbtn');
        let username = document.querySelector('#username');
        let password = document.querySelector('#password');
        let user = document.querySelector('#user');
        let pass = document.querySelector('#pass');

        btn.onclick = function(){
            let xhr = new XMLHttpRequest()//实例化对象

            // xhr.open('get','/loginp?username='+username.value+'&password='+password.value,true)//是否异步get
            xhr.open('post','/loginp',true)
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
            let qs = `username=${username.value}&password=${password.value}`
       

            xhr.send(qs)//将请求发送到数据库

            xhr.onreadystatechange = function(){
                if(xhr.status == 200 && xhr.readyState == 4){
                let result = JSON.parse(xhr.responseText)//转对像
                console.log(result);
                pass.innerHTML = result.data.result[0].password
                user.innerHTML = result.data.result[0].username  
            }//接受
        }
    }
    </script>
</body>
</html>